<template>
  <div>
    <el-row class="bottom-space">
      <el-col>
        <el-upload :action="'/pmph/action/task/uploadTaskFile?taskId=' + task.id"
                   :before-upload="beforeUpload"
                   multiple
                   :show-file-list="false"
                   :on-success="onSuccess">
          <el-button size="small" type="primary">上传新附件</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-row>
      <el-table highlight-current-row :data="task.taskFileList.slice((currentPage-1)*5,currentPage*5)" :height="300"
                border stripe>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column prop="name"
                         label="附件名称"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="size"
                         label="附件大小"
                         min-width="50">
        </el-table-column>
        <el-table-column prop="createdTime"
                         :formatter="dateFormat"
                         label="上传日期"
                         min-width="50">
        </el-table-column>
        <el-table-column prop="createdBy"
                         label="上传人员"
                         min-width="50">
          <template slot-scope="scope">
            <span>{{ getCreatedName(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         min-width="50">
          <template slot-scope="scope">
            <span><el-link type="danger" @click.prevent="deleteTaskFile(scope.row)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination :page-size="5"
                     :current-page.sync="currentPage"
                     :total="task.taskFileList.length" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 10px"
                     v-if="task.taskFileList.length > 5"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "TaskFileTable",
  props: ['task'],
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    auditorList() {
      return this.$store.state.userList
    },
  },
  methods: {
    //时间处理
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
    getCreatedName(scope) {
      return this.auditorList.find(item => item.userName == scope.row.createdBy) && this.auditorList.find(item => item.userName == scope.row.createdBy).name
    },
    beforeUpload(file) {
      if (file.size > 50000000) {
        this.$message.warning("上传文件大小不可以超过50M")
        return false
      }
      if (this.task.taskFileList.find((taskFile) => taskFile.name === file.name)) {
        this.$message.warning('上传失败, 文件:' + file.name + '已存在')
        return false
      }
    },
    onSuccess(response) {
      this.task.taskFileList.push(response.data)
    },
    deleteTaskFile(taskFile) {
      let param = new URLSearchParams();
      param.append("taskFile", JSON.stringify(taskFile))
      this.axios.post('/pmph/action/task/deleteTaskFileById', param)
        .then(() => {
          this.task.taskFileList.splice(this.task.taskFileList.indexOf(taskFile), 1)
        })
    }
  }
}
</script>

<style scoped>
.bottom-space {
  margin-bottom: 10px;
}
</style>
